<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="800px"
    :close-on-click-modal="false"
  >
    <u-form
      ref="form"
      label-width='124px'
      v-model="form"
      :formArray="formArray"
      :show-btn="false"
      @submit="submitForm"
      @close="dialogVisible = false"
      mode="form"
    >
      <template #file="scope">
        <FileUpload
          :value="form.packageUrl"
          :limit="1"
          accept="application/zip"
          :fileSize="100"
          :fileType="['zip']"
          @input="fileChange"
        />
      </template>

      <template #url="scope">
        <span v-if="form.packageUrl">{{ form.packageUrl }}</span>
        <span v-else style="color: red;font-weight: bold;"> 暂未上传 </span>
      </template>
    </u-form>
  </el-dialog>
</template>

<script>
import UForm from '@/components/uForm'
import {addSdk, updateSdk} from "@/api/device/adapterManagement";

export default {
  name: "FillFormDialog",
  components: {UForm},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    adapterName: {
      type: String,
      default: ''
    },
    // 修改时传过来的原来表单数据
    originForm: {
      type: Object,
      default() {
        return {}
      }
    },
    // 编辑模式： add or update
    mode: {
      type: String,
      default: 'add'
    },
    getList: {
      type: Function
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(newValue) {
        return this.$emit('input', newValue)
      }
    },
    title() {
      return this.mode === 'add' ? '新增驱动版本' : '修改驱动版本'
    }
  },
  data() {
    return {
      formArray: [
        {
          label: "驱动版本",
          key: "adapterVersion",
          col: 24,
          type: "input",
          rule: {required: true, message: '驱动版本不能为空！', trigger: 'blur'},
        },
        {
          label: "中间件版本",
          key: "middlewareVersion",
          col: 24,
          type: "input",
          placeholder: "请输入适配的中间件版本，可以有多个，用英文逗号分隔",
          rule: {required: true, message: '驱动版本不能为空！', trigger: 'blur'},
        },
        {
          label: "驱动压缩包",
          key: "packageUrl",
          col: 24,
          slot: "file",
          rule: {required: true, message: '驱动压缩包不能为空！', trigger: 'change'},
        },
        {label: "驱动压缩包地址", key: "packageUrl", col: 24, slot: "url"},
      ],
      form: {
        adapterVersion: '',
        middlewareVersion: '',
        packageUrl: ''
      }
    }
  },

  methods: {
    submitForm(callback) {
      if(!this.adapterName) this.$modal.msgError("插件库名称不能为空！");
      if (this.form.id != null) {
        updateSdk({
          adapterName: this.adapterName,
          ...this.form
        }).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.dialogVisible = false;
          callback && callback()
          this.getList();
        });
      } else {
        addSdk({
          adapterName: this.adapterName,
          ...this.form
        }).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.dialogVisible = false;
          callback && callback()
          this.getList();
        });
      }
    },
    fileChange(imgUrl) {
      this.form.packageUrl = imgUrl
    }
  },

  created() {
    if(this.originForm && this.originForm.id){
      this.form = {...this.originForm};
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
